<template>
  {{ props.type }}
  <!-- 普通文本 -->
  <template v-if="props.type === 'input'">
    <CdInput v-model.trim="curVal" :disabled="props.col.disabled" :readonly="props.col.readonly" />
  </template>

  <!-- 文本域 -->
  <template v-else-if="props.type === 'textarea'">
    <CdInput
      v-model.trim="curVal"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 5 }"
      :disabled="props.col.disabled"
      :readonly="props.col.readonly"
    />
  </template>

  <!-- 多选框 -->
  <template v-else-if="props.type === 'checkbox'">
    <CdCheckboxGroup
      v-model="curVal"
      :type="props.col.dictType"
      :p-val="props.col.dictParentValue"
      :p-id="props.col.dictParentId"
      :disabled="props.col.disabled"
    />
  </template>

  <!-- 单选框 -->
  <template v-else-if="props.type === 'radiobox'">
    <CdRadioGroup
      v-model="curVal"
      :type="props.col.dictType"
      :p-val="props.col.dictParentValue"
      :p-id="props.col.dictParentId"
      :allDisabled="props.col.disabled"
    />
  </template>

  <!-- 下拉框 -->
  <template v-else-if="props.type === 'select'">
    <CdSelect
      v-model.trim="curVal"
      :type="props.col.dictType"
      :p-val="props.col.dictParentValue"
      :p-id="props.col.dictParentId"
      :disabled="props.col.disabled"
      :readonly="props.col.readonly"
    />
  </template>

  <!-- 日期选择 -->
  <template v-else-if="props.type === 'dateselect'">
    <CdDatePicker v-model.trim="curVal" type="date" :disabled="props.col.disabled" :readonly="props.col.readonly" />
  </template>

  <!-- 日期选择 -->
  <template v-else-if="props.type === 'dateselect'">
    <CdDatePicker v-model.trim="curVal" type="date" :disabled="props.col.disabled" :readonly="props.col.readonly" />
  </template>

  <!-- 日期范围选择 -->
  <template v-else-if="props.type === 'daterange'">
    <CdDatePickerRange
      :keys="['startDate', 'endDate']"
      :startDate="startDate"
      :endDate="endDate"
      @startDate="(date) => (startDate = date)"
      @endDate="(date) => (endDate = date)"
      :allDisabled="props.col.disabled"
    />
  </template>

  <!-- 日期范围选择 -->
  <template v-else-if="props.type === 'daterange'">
    <CdDatePickerRange
      :keys="['startDate', 'endDate']"
      :startDate="startDate"
      :endDate="endDate"
      @startDate="(date) => (startDate = date)"
      @endDate="(date) => (endDate = date)"
      :allDisabled="props.col.disabled"
    />
  </template>

  <template v-else>
    <CdInput v-model.trim="curVal" type="text" :disabled="props.col.disabled" :readonly="props.col.readonly" />
  </template>
</template>

<script lang="ts" setup>
import { ref, watch, watchEffect } from 'vue'
import CdInput from '@/components/basic/CdInput/input.vue'
import CdDatePickerRange from '@/components/basic/CdDatePickerRange/datePickerRange.vue'
import CdDatePicker from '@/components/basic/CdDatePicker/datePicker.vue'
import CdSelect from '@/components/basic/CdSelect/select.vue'
import CdCheckboxGroup from '@/components/basic/CdCheckboxGroup'
import CdRadioGroup from '@/components/basic/CdRadioGroup'
const props = defineProps({
  modelValue: {
    type: [String, Array]
  },
  type: {
    type: String,
    default: ''
  },
  col: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['update:modelValue'])

const startDate = ref('') // 日期选择范围选择 开始日期
const endDate = ref('') // 日期选择范围选择 结束日期
let curVal: any = ref('')
watchEffect(() => {
  if (props.type === 'daterange') {
    curVal = []
    curVal[0] = startDate.value
    curVal[1] = endDate.value
  }
  emits('update:modelValue', curVal)
})
</script>
